<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/public.css">
    <style>
        main {
            background: #EDEDED;
            padding: 0;
        }

        .title {
            background: #fff;
            text-align: center;
            font-size: 0.4rem;
            color: #373737;
            line-height: 1.173rem;
            height: 1.173rem;
            position: relative;
        }

        .back {
            width: 0.293rem;
            position: absolute;
            top: 0.376rem;
            left: 0.213rem;
        }

        .list {
            background: #fff;
            margin-top: 0.4rem;
            padding: 0 0.533rem;
            width: 100%;
            box-sizing: border-box;
            padding-bottom: 1rem;
        }

        .list_li {
            justify-content: space-between;
            align-items: center;
            padding: 0.4rem 0;
            margin-top: 0.32rem;
            font-size: 0.4rem;
            color: #333;
            border-bottom: #DADADA solid 1px;
        }

        .list_li_left {
            align-items: center;
            flex: 1;
        }

        .list_li_icon {
            width: 0.426rem;
            margin-right: 0.8rem;
        }

        .list_li_left_input {
            flex: 1;
            border: none;
            outline: none;
        }

        .code {
            width: 2.186rem;
            height: 0.72rem;
            background: rgba(255, 122, 0, 1);
            border-radius: 0.08rem;
            box-sizing: border-box;
            text-align: center;
            font-size: 0.32rem;
            color: #fff;
            line-height: 0.72rem;
            cursor: pointer;
        }

        .re_btn {
            width: 7.2rem;
            height: 1.066rem;
            background: rgba(255, 122, 0, 1);
            border-radius: 0.533rem;
            text-align: center;
            color: #fff;
            line-height: 1.066rem;
            margin: 0 auto;
            margin-top: 2.24rem;
            font-size: 0.4rem;
        }

        .yl {
            padding: 0.213rem;
            border: 1px solid #eee;
            border-radius: 5px;
        }

        .infoInput_sel {
            align-items: center;
            flex: 1;
            font-size: 12px;
            color: #747474;
        }
        .infoInput_sel2 {
            margin-top: 10px;
            flex-wrap: wrap;
        }
        .form-control {
            font-size: 12px;
            padding: 0 !important;
            transform: scale(0.83);
        }

        .form-group {
            display: inline-block !important;
            width: 2rem;
            margin: 0;
        }

        .address_input {
            width: 1.3rem;
            height: 0.533rem;
            margin-top: 10px;
        }

        .address_text {
            margin: 0 3px;
            margin-top: 10px;
        }
        .textarea {
            width: 100%;
            height: 1.3rem;
            display: block;
            font-size: 12px;
            margin-top: 10px;
            box-sizing: border-box;
            padding: 0.266rem;
        }
        .mask {
            width: 100%;
            height: 100vh;
            box-sizing: border-box;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            background: rgba(0, 0, 0, 0.35);
            display: none;
        }
        .pop {
            width: 6.66rem;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.7);
            box-sizing: border-box;
            padding: 0.346rem;
            margin-top: 3.94rem;
        }
        .pop_numBox {
            width: 100%;
            border:3px solid #C7C7C7;
            text-align: center;
        }
        .pop_numBox_title {
            font-size:0.426rem;
            color:rgba(26,25,25,1);
            margin-top: 1.2rem;
            margin-bottom: 1.093rem;
        }
        .pop_numBox_num {
            font-size:0.426rem;
            color:rgba(26,25,25,1);
            opacity:0.6;
            letter-spacing: 12px;
            text-align: center;
            margin-top: 0.453rem;
        }
        .pop_numBox_change {
            text-align: right;
            font-size: 12px;
            transform: scale(0.75);
            margin-top: 0.4rem;
        }
        .pop_numBox_btn {
            width:2.986rem;
            height:0.853rem;
            background:rgba(39,89,168,1);
            text-align: center;
            line-height: 0.853rem;
            color: rgba(255,255,255,0.6);
            font-size: 0.426rem;
            margin: 0 auto;
            margin-top: 1rem;
            cursor: pointer;
            margin-bottom: 0.9333rem;
        }
        .mask_close {
            width: 0.746rem;
            display: block;
            margin: 0 auto;
            margin-top: 0.293rem;
            cursor: pointer;
        }
        .pop_numBox_num_bg {
            background: #383838;
            color: #fff;
        }
    </style>
    <script src="./js/index.js"></script>
</head>

<body>
    <main>
        <div class="title">
            <img class="back" src="./img/back_r.png" alt="">
            <div>用户注册</div>
        </div>
        <div class="list">
            <div class="flex list_li">
                <div class="flex list_li_left">
                    <img class="list_li_icon" src="./img/icon3.png" alt="">
                    <input class="list_li_left_input" type="text" placeholder="请勿输入姓名">
                </div>
            </div>
            <div class="flex list_li">
                <div class="flex list_li_left">
                    <img class="list_li_icon" src="./img/icon7.png" alt="">
                    <input class="list_li_left_input" type="text" placeholder="请输入身份证号">
                </div>
            </div>
            <div class="flex list_li">
                <div class="flex list_li_left">
                    <img class="list_li_icon" src="./img/icon9.png" alt="">
                    <div>
                        <div class="flex infoInput_sel">
                            <form class="form-inline">
                                <div data-toggle="distpicker">
                                    <div class="form-group">
                                        <label class="sr-only" for="province1">Province</label>
                                        <select class="form-control" id="province1"></select>
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="city1">City</label>
                                        <select class="form-control" id="city1"></select>
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="district1">District</label>
                                        <select class="form-control" id="district1"></select>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="flex infoInput_sel infoInput_sel2">
                            <input type="text" class="address_input">
                            <div class="address_text">小区</div>
                            <input type="text" class="address_input">
                            <div class="address_text">楼号</div>
                            <input type="text" class="address_input">
                            <div class="address_text">单元</div>
                            <input type="text" class="address_input">
                            <div class="address_text">楼层</div>
                            <input type="text" class="address_input">
                            <div class="address_text">门牌号</div>
                        </div>
                        <textarea class="textarea" placeholder="请输入详细地址&#10;xx小区xx楼层xx门牌号"></textarea>
                    </div>

                </div>
            </div>
            <div class="flex list_li">
                <div class="flex list_li_left">
                    <img class="list_li_icon" src="./img/icon8.png" alt="">
                    <input class="list_li_left_input yl" type="number" placeholder="选填">
                </div>
            </div>
            <div class="flex list_li">
                <div class="flex list_li_left">
                    <img class="list_li_icon" src="./img/icon6.png" alt="">
                    <input class="list_li_left_input" type="number" placeholder="请输入手机号">
                </div>
                <div class="code">获取验证码</div>
            </div>
            <div class="flex list_li">
                <div class="flex list_li_left">
                    <img class="list_li_icon" src="./img/icon4.png" alt="">
                    <input class="list_li_left_input" type="number" placeholder="请输入验证码">
                </div>
            </div>
            <div class="flex list_li">
                <div class="flex list_li_left">
                    <img class="list_li_icon" src="./img/icon5.png" alt="">
                    <input class="list_li_left_input" type="password" placeholder="6位及以上字母数字组合">
                </div>
            </div>
            <div class="flex list_li">
                <div class="flex list_li_left">
                    <img class="list_li_icon" src="./img/icon5.png" alt="">
                    <input class="list_li_left_input" type="password" placeholder="请再次确认密码">
                </div>
            </div>
            <div class="re_btn">注册</div>
        </div>
        <div class="mask">
            <div class="pop">
                <div class="pop_numBox">
                    <div class="pop_numBox_title">请选择您的环保账号</div>
                    <div class="pop_numBox_num">123456789</div>
                    <div class="pop_numBox_num">123456789</div>
                    <div class="pop_numBox_num">123456789</div>
                    <div class="pop_numBox_num pop_numBox_num_bg">123456789</div>
                    <div class="pop_numBox_num">123456789</div>
                    <div class="pop_numBox_num">123456789</div>
                    <div class="pop_numBox_change">换一换</div>
                    <div class="pop_numBox_btn">点击领取</div>
                </div>
            </div>
            <img class="mask_close" src="./img/yuan.png" alt="">
        </div>
    </main>

    <script src="./js/jquery.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
    <script src="js/distpicker.data.js"></script>
    <script src="js/distpicker.js"></script>
    <script src="js/main.js"></script>
    <script>
        $(document).on('click','.pop_numBox_num',function() {
            $('.pop_numBox_num').removeClass('pop_numBox_num_bg');
            $(this).addClass('pop_numBox_num_bg');
        })
        $('.mask_close').click(function() {
            $('.mask').hide();
        })
        $('.re_btn').click(function() {
            $('.mask').show();
        })
    </script>
</body>

</html>